<template>
  <div class="layout_container">
    <el-menu :collapse="true" background-color="#111111" text-color="white">
      <!-- 根据路由动态生成菜单 -->
      <Menu :menuList="menuRoutes"></Menu>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
const menuRoutes: any = [
  {
    path: "/login",
    name: "Login",
    meta: {
      title: "登录",
      hidden: true,
      icon: "Promotion",
    },
  },
  {
    path: "/",
    name: "Layout",
    meta: {
      title: "layout",
      hidden: false,
      icon: "Avatar",
    },
    redirect: "/home",
    children: [
      {
        path: "/home",
        name: "Home",
        meta: {
          title: "首页",
          hidden: false,
          icon: "HomeFilled",
        },
      },
    ],
  },
  {
    path: "/404",
    name: "404",
    meta: {
      title: "404 error",
      hidden: true,
      icon: "Warning",
    },
  },
  {
    path: "/screen",
    name: "Screen",
    meta: {
      title: "数据大屏",
      hidden: false,
      icon: "Platform",
    },
  },
  {
    path: "/acl",
    name: "Acl",
    meta: {
      title: "权限管理",
      hidden: false,
      icon: "Lock",
    },
    children: [
      {
        path: "/acl/user",
        name: "Acl",
        meta: {
          title: "用户管理",
          hidden: false,
          icon: "User",
        },
      },
      {
        path: "/acl/role",
        name: "Role",
        meta: {
          title: "角色管理",
          hidden: false,
          icon: "UserFilled",
        },
      },
      {
        path: "/acl/permission",
        name: "Permission",
        meta: {
          title: "菜单管理",
          hidden: false,
          icon: "Monitor",
        },
      },
    ],
  },
  {
    path: "/product",
    name: "Product",
    meta: {
      title: "商品管理",
      hidden: false,
      icon: "Goods",
    },
    children: [
      {
        path: "/product/trademark",
        name: "Trademark",
        meta: {
          title: "品牌管理",
          hidden: false,
          icon: "ShoppingCartFull",
        },
      },
      {
        path: "/product/attr",
        name: "Attr",
        meta: {
          title: "属性管理",
          hidden: false,
          icon: "ChromeFilled",
        },
      },
      {
        path: "/product/spu",
        name: "SPU",
        meta: {
          title: "SPU管理",
          hidden: false,
          icon: "Calendar",
        },
      },
      {
        path: "/product/sku",
        name: "SKU",
        meta: {
          title: "SKU管理",
          hidden: false,
          icon: "Orange",
        },
      },
    ],
  },
  {
    path: "/:pathMatch(.*)*",
    redirect: "/404",
    name: "Any",
    meta: {
      title: "任意路由",
      hidden: true,
      icon: "CircleClose",
    },
  },
];
</script>

<style scoped lang="scss">
.layout_container {
  width: 100%;
  height: 100vh;
}
</style>
